<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>华胜后台管理</title>
    <link rel="stylesheet" type="text/css" href="css/unified.css">
    <script src="plugins/layui/layui.js"></script>
    <style type="text/css">
        .addbtn{

            /*background-color: #1E9FFF*/
        }
        .layui-table-view .layui-table td, .layui-table-view .layui-table th{padding: 0}   
    </style>
</head>
<body>

    <div class="breadcrumbnav">
        <span class="layui-breadcrumb " lay-separator="·">
          <a ><cite>首页</cite></a>
          <a ><cite>系统管理</cite></a>
        </span>
    </div>
    <div class="kit-doc">
        <!-- 标题 -->


        <div class="kit-doc-title">

            <fieldset>
                <legend> <a name="blockquote">系统</a>
                </legend>
            </fieldset>
        </div>
        <!-- 标题 end-->
        
        
        <!-- 概述 -->
        <div class="boderbox">
            <div class="rowtop">
                <button class="layui-btn addbtn">
                   添加+
                </button>

                <form class="layui-form searchform" action="" id="comSearchForm">
                    <div class="layui-input-inline">
                      <input type="text" name="text" required lay-verify="required" placeholder="输入关键字" autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-btn-group">
                      <button class="layui-btn">搜索</button>
                      <button class="layui-btn layui-btn-normal">重置</button>
                    </div>
                </form> 
            </div>
           
            <div class="layui-tab-content notab">
                <div class="layui-tab-item layui-show">
                     <table class="layui-table "  lay-size="lg" lay-data="{page:'false', id:'commodityclass',height: 'full-10'}" lay-filter="test" id="commodityclass">
                        <thead>
                            <tr> 
                                <th lay-data="{field:'operation', width:60}">序号</th>
                                <th lay-data="{field:'id', width:350}">操作</th>
                                <th lay-data="{field:'a1', width:200}">名称</th>
                                <th lay-data="{field:'a2', width:100}">状态</th>
                                <th lay-data="{field:'Coee', width:100}">排序</th>
                                <th lay-data="{field:'phone', width:200}">菜单权限</th>
                                <th lay-data="{field:'dsas', width:300}">目录权限</th>
                            </tr> 
                        </thead>
                        <tbody>
                            <tr>
                                
                                <td>
                                    1
                                </td>
                                <td>
                                    <button class="layui-btn layui-btn-mini" lay-event="detail">查看</button>
                                    <button class="layui-btn layui-btn-normal" lay-event="edit">修改</button>
                                    <button class="layui-btn layui-btn-danger layui-btn-mini" lay-event="del">删除</button>
                                    <button class="layui-btn layui-bg-orange layui-btn-mini" lay-event="del">授权菜单</button>
                                </td>
                                <td>商品管理员</td>
                                <td>显示</td>
                                <td></td>
                                <td>首页,商品管理,商品类名</td>
                                <td></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
              </div>

            
            <script>
            layui.use(['layer', 'form', 'element','table'], function(){
              var layer = layui.layer
              ,form = layui.form
              ,element = layui.element
              ,table = layui.table;

                table.on('tool(test)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
                  var data = obj.data; //获得当前行数据
                  var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                  var tr = obj.tr; //获得当前行 tr 的DOM对象
                 
                  if(layEvent === 'detail'){ //查看
                    //do somehing
                  }
                });

            }); 

 

            </script>
        </div>
        <!-- 概述 end-->
    </div>
</body>
</html>